<template>
  <div>
    <h3>欢迎光临黑白喵子后台</h3>
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px"> 点我发现其他</el-button>
    <el-drawer title="我的项目" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <span>
        <el-button @click="show3 = !show3" class="_btn">黑白喵子的项目</el-button>

        <div style="margin-top: 20px; height: 200px">
          <el-collapse-transition>
            <div v-show="show3">
              <div class="transition-box">
                <a href="https://gitee.com/Cat9521/vue_shop_-cat" target="_blank">本项目gitee下载地址</a>
              </div>
              <div class="transition-box">
                <a href="http://www.maji666.cn" target="_blank">第一个实战项目网站</a>
              </div>
              <div class="transition-box">
                <a href="http://mj.music.maji666.cn" target="_blank">仿网易云音乐(Google请求不到数据使用其他浏览器)</a>
              </div>
              <div class="transition-box">
                <a href="http://mj.pdd.maji666.cn" target="_blank">仿拼多多(数据接口失效,之后更新)</a>
              </div>
              <div class="transition-box" @click="open">
                  <p>博客</p>
              </div>
            </div>
          </el-collapse-transition>
        </div>
      </span>
    </el-drawer>
  </div>
</template>

<script>

export default {
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      show3: false,
      action: '敬请期待'
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    open() {
      this.$alert('黑白喵子博客正在开发中', '提示', {
        confirmButtonText: '确定',
        callback: (action) => {
          this.$message({
            type: 'success',
            message: `action: ${this.action}`
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
._btn {
  margin-left: 35%;
  background-color: lightblue;
}
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 24px 20px;
  box-sizing: border-box;
  margin-left: 28%;
  a {
    text-decoration: none;
    color: cornsilk;
  }
}
</style>
